<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = ref({
  username: '',
  password: ''
})
const isLoading = ref(false)
const errorMessage = ref('')

// 第三方登录相关状态
const showWechatQR = ref(false)
const showQQQR = ref(false)

// 微信登录处理函数
const handleWechatLogin = () => {
  showWechatQR.value = true
  // 在实际应用中，这里应该调用API获取真实的微信登录二维码
}

// QQ登录处理函数
const handleQQLogin = () => {
  showQQQR.value = true
  // 在实际应用中，这里应该调用API获取真实的QQ登录二维码
}

// 关闭二维码模态框
const closeQRModal = () => {
  showWechatQR.value = false
  showQQQR.value = false
}

// 登录处理函数
const handleLogin = async () => {
  isLoading.value = true
  errorMessage.value = ''
  
  try {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 这里应该是实际的登录API调用
    // 模拟登录成功
    if (form.value.username && form.value.password) {
      // 存储用户信息到本地存储
      const userData = {
        id: '10086',
        username: form.value.username,
        nickname: form.value.username,
        email: `${form.value.username}@example.com`,
        phone: '',
        avatar: '/img/5.webp',
        role: 'player',
        registrationDate: '2024-01-15T08:30:00Z',
        lastLogin: new Date().toISOString(),
        twoFactorEnabled: false,
        notifications: {
          enabled: true
        },
        theme: 'dark',
        language: 'zh-CN'
      }
      
      localStorage.setItem('user', JSON.stringify(userData))
      localStorage.setItem('token', 'mock-jwt-token')
      
      // 跳转到首页
      router.push('/home')
    } else {
      errorMessage.value = '请输入弈士昵称和密码'
    }
  } catch (error) {
    errorMessage.value = '登录失败，请稍后重试'
  } finally {
    isLoading.value = false
  }
}

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register')
}
</script>

<template>
  <div class="login-container">
    <!-- 背景装饰元素已移除 -->
    
    <!-- 主登录卡片 -->
    <div class="login-card">
      <!-- 品牌标识 -->
      <div class="login-brand">
        <div class="logo-wrapper">
          <img src="@/../img/5.webp" alt="金铲铲之战" class="brand-logo" />
        </div>
        <h1 class="game-title">金铲铲之战</h1>
      </div>
      
      <!-- 欢迎信息 -->
      <div class="login-welcome">
        <h2>欢迎回来，小小弈士</h2>
        <p>登录您的账号，开启全新的弈战之旅</p>
      </div>
      
      <!-- 错误提示 -->
      <div v-if="errorMessage" class="error-message">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
        {{ errorMessage }}
      </div>
      
      <!-- 登录表单 -->
      <form @submit.prevent="handleLogin" class="login-form">
        <!-- 用户名输入 -->
        <div class="form-group">
          <label for="username" class="form-label">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
            弈士昵称
          </label>
          <div class="input-container">
            <input
              type="text"
              id="username"
              v-model="form.username"
              placeholder="请输入您的弈士昵称"
              required
              class="form-input"
            />
          </div>
        </div>
        
        <!-- 密码输入 -->
        <div class="form-group">
          <label for="password" class="form-label">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
              <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
            </svg>
            密码
          </label>
          <div class="input-container">
            <input
              type="password"
              id="password"
              v-model="form.password"
              placeholder="请输入您的密码"
              required
              class="form-input"
            />
          </div>
        </div>
        
        <!-- 表单选项 -->
        <div class="form-options">
          <div class="remember-me">
            <input type="checkbox" id="remember" class="checkbox" />
            <label for="remember" class="checkbox-label">记住我</label>
          </div>
          <a href="#" class="forgot-password">忘记密码？</a>
        </div>
        
        <!-- 登录按钮 -->
        <button type="submit" class="login-button" :disabled="isLoading">
          <span v-if="!isLoading">立即登录</span>
          <span v-else class="loading-spinner"></span>
        </button>
        
        <!-- 注册提示 -->
        <div class="register-prompt">
          还没有账号？
          <button type="button" class="register-button" @click="goToRegister">立即注册</button>
        </div>
        
        <!-- 第三方登录 -->
        <div class="third-party-login">
          <div class="divider">
            <span>其他登录方式</span>
          </div>
          
          <div class="social-buttons">
            <button type="button" class="social-button wechat" @click="handleWechatLogin">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm0 2c3.314 0 6 2.686 6 6s-2.686 6-6 6-6-2.686-6-6 2.686-6 6-6z"></path>
              </svg>
              微信登录
            </button>
            
            <button type="button" class="social-button qq" @click="handleQQLogin">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              QQ登录
            </button>
          </div>
        </div>
      </form>
    </div>
    
    <!-- 微信登录二维码模态框 -->
    <div v-if="showWechatQR" class="qr-modal" @click="closeQRModal">
      <div class="qr-content" @click.stop>
        <button class="close-button" @click="closeQRModal">&times;</button>
        <h3>微信扫码登录</h3>
        <div class="qr-code-container">
          <!-- 这里显示微信登录二维码 -->
          <div class="qr-placeholder">微信登录二维码</div>
        </div>
        <p>请使用微信扫描二维码进行登录</p>
      </div>
    </div>
    
    <!-- QQ登录二维码模态框 -->
    <div v-if="showQQQR" class="qr-modal" @click="closeQRModal">
      <div class="qr-content" @click.stop>
        <button class="close-button" @click="closeQRModal">&times;</button>
        <h3>QQ扫码登录</h3>
        <div class="qr-code-container">
          <!-- 这里显示QQ登录二维码 -->
          <div class="qr-placeholder">QQ登录二维码</div>
        </div>
        <p>请使用QQ扫描二维码进行登录</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 移除高级主题样式导入 */

/* 登录容器 */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  overflow: hidden;
  background-image: url('../../img/kv.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 移除背景粒子效果 */

/* 登录卡片 */
.login-card {
  background: var(--bg-card);
  border-radius: var(--border-radius-xl);
  padding: 40px;
  max-width: 480px;
  width: 100%;
  box-shadow: none;
  border: 1px solid var(--border-secondary);
  backdrop-filter: none;
  position: relative;
  z-index: var(--z-index-content);
  transition: none;
}

/* 确保登录卡片在鼠标悬停时不发生变化 */
.login-card:hover {
  background: var(--bg-card);
  border-color: var(--border-secondary);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: none;
  transition: none;
}

/* 品牌标识 */
.login-brand {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}

.logo-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: none;
}

.brand-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.game-title {
  font-size: 2rem;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.game-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.season-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--bronze-color), var(--gold-color));
  border-radius: var(--border-radius-full);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.875rem;
}

/* 欢迎信息 */
.login-welcome {
  text-align: center;
  margin-bottom: 32px;
}

.login-welcome h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.login-welcome p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* 错误提示 */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: rgba(255, 107, 107, 0.1);
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius-md);
  color: var(--secondary-color);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

/* 表单样式 */
.login-form {
  width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
}

.input-container {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--border-secondary);
  border-radius: var(--border-radius-md);
  color: var(--text-primary);
  font-size: 1rem;
  transition: none;
  backdrop-filter: blur(5px);
}

.form-input:focus {
  outline: none;
  border-color: var(--border-secondary);
  box-shadow: none;
}

.form-input:hover {
  border-color: var(--border-secondary);
  box-shadow: none;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 表单选项 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
}

.checkbox-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.forgot-password {
  color: var(--accent-color);
  font-size: 0.9rem;
  text-decoration: none;
  transition: none;
}

.forgot-password:hover {
  color: var(--accent-color);
}

/* 登录按钮 */
.login-button {
  width: 100%;
  padding: 14px;
  background: var(--primary-color);
  color: var(--text-primary);
  border: none;
  border-radius: var(--border-radius-md);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.login-button:hover:not(:disabled) {
  transform: none;
  box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
}

.login-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 加载动画 */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  /* 移除动画 */
}

/* 移除旋转动画 */

  /* 二维码模态框样式 */
  .qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: none;
  }

  .qr-content {
    background: var(--bg-card);
    border-radius: var(--border-radius-xl);
    padding: 32px;
    width: 300px;
    text-align: center;
    position: relative;
    border: 1px solid var(--border-secondary);
  }

  .close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-primary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: none;
  }

  .close-button:hover {
    background: var(--border-secondary);
  }

  .qr-content h3 {
    margin-top: 16px;
    margin-bottom: 24px;
    color: var(--text-primary);
    font-size: 1.25rem;
  }

  .qr-code-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-secondary);
    border-radius: var(--border-radius-md);
  }

  .qr-placeholder {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
  }

  .qr-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
  }

  /* 注册提示 */
.register-prompt {
  text-align: center;
  margin-top: 24px;
  color: var(--text-secondary);
}

.register-button {
  background: none;
  border: none;
  color: var(--accent-color);
  font-weight: 600;
  cursor: pointer;
  transition: none;
  padding: 4px 8px;
}

.register-button:hover {
  color: var(--accent-color);
  text-decoration: none;
}

/* 第三方登录 */
.third-party-login {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-secondary);
}

.divider {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}

.divider span {
  background: var(--bg-card);
  padding: 0 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-secondary);
  z-index: 0;
}

.social-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: none;
}

.social-button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-secondary);
}

.social-button svg {
  width: 20px;
  height: 20px;
}

.social-button.wechat:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
}

.social-button.qq:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-card {
    padding: 32px 24px;
  }
  
  .logo-wrapper {
    width: 100px;
    height: 100px;
  }
  
  .brand-logo {
    width: 60px;
    height: 60px;
  }
  
  .game-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 16px;
  }
  
  .login-card {
    padding: 24px 20px;
  }
  
  .social-buttons {
    grid-template-columns: 1fr;
  }
  
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>